<template>
  <div>
    <van-nav-bar
      title="商品"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in relute.gallery" :key="index"
        ><img :src="item.img_url" alt=""
      /></van-swipe-item>
    </van-swipe>

    <p>{{ relute.info.name }}</p>
    <span>{{ relute.info.goods_brief }}</span>
    <i>￥{{ relute.info.retail_price }}</i>
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" />
      <van-goods-action-icon icon="shop-o" text="店铺" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
  </div>
</template>
<script>
export default {
  data() {
    return {
      relute: {},
    };
  },
  created() {
    let id = this.$route.params.id;
    console.log(id);
    this.$axios
      .get(
        `http://shop.bufantec.com/bufan/goods/detailaction?openId=13216484256&id=${id}`
      )
      .then((res) => {
        // console.log(res);
        this.relute = res.data;
      });
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  height: 260px;
  text-align: center;
  background-color: #39a9ed;
  img {
    height: 100%;
  }
}
</style>